// define the namespace
syslib.namespace("syslib.ui");

// tag conversor
syslib.ui.ButtonMenuTag = __class(syslib.ui.TagConversor, {
	component : null,
	
	execute : function(){
		// create the button
		var button = new syslib.ui.ButtonMenu(this.__attributes);
		
		// append the button
		button.appendTo(this.__container);
		
		// store the component
		this.component = button;
	},

	getComponent : function(){
		// set the form
		return this.component;
	}
});

// define the component
syslib.ui.ButtonMenu = __class(syslib.ui.UIComponent, {
	__componentName : "syslib.ui.ButtonMenu", 
	__options : {}, 
	 
	selectedContainer : null,
	switcherContainer : null, 
	childrenContainer : null,
	children : [],
	actionPerformed : false, 
		
	__construct : function(options){
		// set the options
		this.__options = __extend({
			id : syslib.element.generateID(), 
			title : "Button menu",
			width: 250, 
			maxHeight: 400, 
			direction : "right", 
			style : ""
		}, options);
		
		// set the default values 
		this.selectedContainer = null;
		this.switcherContainer = null;
		this.childrenContainer = null;
		this.children = [];
		this.actionPerformed = false;
		  
		// load the style
		syslib.loadStyleForComponent("buttonmenu");
	},

	__createElement: function(){
		// create the dom attributes of the main object
		var attributes = __extend(this.__attributes, {
			"class" : "syslib-buttonmenu-container-normal", 
			"style" : this.__options.style
		});

		// create the json structure
		elemtJSON = ["span", attributes,
			["span", {"innerName" : "selectedContainer", "class" : "syslib-buttonmenu-selected-container"}, 
				this.__options.title
			],
			["span", {"innerName" : "switcherContainer", "class" : "syslib-buttonmenu-switcher-container"}, 
				["span", {"innerName" : "switcher", "class" : "syslib-buttonmenu-switcher-normal"},
					"&nbsp;" 
				]				
			],
			["div", {"innerName" : "childrenContainer"}]
		];

		// create the element
		var buttonMenu 	= syslib.element.createFromJSON(false, elemtJSON);
		var element		= buttonMenu.element;
		var references	= buttonMenu.references;

		// get the containers
		var switcher			= references.switcher;
		var switcherContainer 	= references.switcherContainer;
		var selectedContainer 	= references.selectedContainer;
		var childrenContainer 	= references.childrenContainer;
		
		// set the class of the children container
		if(this.__options.direction === "left"){
			childrenContainer.className = "syslib-buttonmenu-children-container-right";
		} else {
			childrenContainer.className = "syslib-buttonmenu-children-container-left";
		}
		
		// hide the children container
		__hide(childrenContainer);
	
		// create the events
		__evtListen("mouseover", element, function(){
			element.className 	= "syslib-buttonmenu-container-over";
			switcher.className 	= "syslib-buttonmenu-switcher-over";
		}.applyTo(this));
		
		__evtListen("mouseout", element, function(){
			element.className 	= "syslib-buttonmenu-container-normal";
			switcher.className 	= "syslib-buttonmenu-switcher-normal";
		}.applyTo(this));
		
		__evtListen("mousedown", element, function(){
			element.className = "syslib-buttonmenu-container-clicked";
		}.applyTo(this));
		
		__evtListen("mouseup", element, function(){ 
			element.className = "syslib-buttonmenu-container-over";
		}.applyTo(this));
		
		__evtListen("click", element, function(){
			this.toggleButtons();
		}.applyTo(this));
		
		__evtListen("click", window, function(){
			setTimeout(function(){
				if(this.actionPerformed != true){
					if(syslib.element.isVisible(this.childrenContainer)){
						this.toggleButtons();	
					}
				}
				this.actionPerformed = false;
			}.applyTo(this), 100);
		}.applyTo(this));
		
		// store the elements
		this.selectedContainer 	= selectedContainer;
		this.switcherContainer 	= switcherContainer;
		this.childrenContainer 	= childrenContainer;
		this.__element			= element;
		
		// return
		return element;
	},
	
	toggleButtons : function(){
		// toggle the visibility
		syslib.element.toggleVisibility(this.childrenContainer);
		
		// set the actionPerformed state variable
		this.actionPerformed = true;
	}, 
	
	appendTo : function(container){
		container.appendChild(this.getElement());
	}, 
	
	appendChild : function(buttonItem){
		if(__valid(buttonItem.__componentName) && buttonItem.__componentName == 'syslib.ui.ButtonItem'){
			// get the children
			var children = this.children;
			
			// get the children count
			var count = children.length;
		
			// store the child
			children[count] = buttonItem;
			
			// append
			this.childrenContainer.appendChild(buttonItem.getElement());

			// return
			return count;
		}
	},

	selectChild : function(index){
		// get the children
		var children 	= this.children;
		var length		= children.length;
		
		// search the childs
		for(var i = 0; i < length; i++){
			// get the data
			var buttonItem = this.children[i];
			
			// check if the index equals the iterator
			if(i == index){
				buttonItem.__select();
			} else {
				// update the buttonitem classes
				buttonItem.__unselect();
			}
		}
	}
});